<template>
	
	<view>
		<u-sticky bgColor="#fff">
		   <u-tabs 
					:list="list" 
					@change="change"
					active-color="#FD7885"
					height='88'
					bar-width='58'
					bar-height='4'
					style="border-bottom: 1px solid #EDEDED;border-top: 1px solid #EDEDED;"
					font-size='26'
					:current='current'
					:is-scroll="false"
					></u-tabs>
		 </u-sticky>
		
	<view class="course_list_container">
		
		<view class="item" v-for="(item, index) in orderList" :key='index'>
			<view class="pic_title align-center">
				<view class="title_box">
					
					<view class="title_pic">
						<image :src='item.productTitleImg' mode="aspectFill"></image>
					</view>
					<view @click="goNav('/me/spreader/ordersUser/info?ordersId=' + item.ordersId)" class="title_info_box">
						<view class="name">{{ item.productTitle }}</view>
						<view class="label" style="padding-top: 20rpx;"><text>订单号：</text>{{ item.ordersNo }}</view>
						
						<view class="label" style="padding-top: 20rpx;"><text>下单时间：</text>{{ item.createTime }}</view>
						
						<view style="display: flex;justify-content: space-between;align-items: center;padding-top: 20rpx;">
							<view class="label" v-if='item.ordersType == 1'><text>订单种类：</text>短剧</view>
							<view class="label" v-else-if='item.ordersType == 2'><text>订单种类：</text>会员</view>
							<view class="label" v-else-if='item.ordersType == 3'><text>订单种类：</text>充值</view>
							<view class="label" v-else-if='item.ordersType == 100'><text>订单种类：</text>推广订单</view>
							<view class="label" v-else-if='item.ordersType == 101'><text>订单种类：</text>推广任务订单</view>
							
							<view style="font-weight: bold;
font-size: 24rpx;
color: #FD7885;">¥{{ item.payMoney }}</view>
						</view>
						
					</view>
					
				</view>
				
				<u-line dashed  v-if="item.questState == 0||item.questState == 2" ></u-line>
				<!-- -->
				<view class="item-btom" v-if="item.questState == 0" >
					<view @click="cancelOrder(item.ordersId)">
						<view class="item-btom-btn">取消</view>
					</view>
					<view @click="handleOrder(item)">
						<view class="item-btom-btn pay">支付</view>
					</view>
				</view>
				<view class="item-btom" v-if="item.questState == 1">
				
				</view>
				<view class="item-btom" v-if="item.questState == 2">
					<view @click="messagebtn2(item)">
						<view class="item-btom-btn pay">确认结果</view>
					</view>
				</view>
				
				
			</view>

		</view>

		<u-loadmore v-if="orderList.length > 0" :status="status" />
		<empty title="暂无资源" :isShow='false' v-if="orderList.length == 0"></empty>

		<!-- 添加支付弹窗 -->
		<u-popup v-model="showPay" mode="bottom" border-radius="14" :closeable="true">
			<view
				style="width: 100%;text-align: center;font-size:38rpx;font-weight: bold;margin-top:15rpx;margin-bottom: 80rpx;">
				选择支付方式
			</view>
			<view @click="goMoney" class="flex align-center justify-end" style="margin-right: 20rpx;color: #8B8FF0;">
				<view class="" style="color: #666666;">
					金豆不足？
				</view>
				去充值
			</view>
			<view style="display: flex;height: 100upx;align-items: center;padding: 20upx 30rpx;"
				v-for="(item, index) in openLists" :key='index' @tap='selectWay(item.id)'>
				<view style="display: flex;width:80%;align-items: center;">
					<image :src="item.image" style="width: 55upx;height: 55upx;"></image>
					<view style="font-size: 30upx;margin-left: 20upx;width: 70%;">{{ item.text }}</view>
				</view>
				<view style="width: 20%;display: flex;justify-content: flex-end;">
					<radio-group name="openWay" style="margin-left: 20upx;">
						<label class="tui-radio">
							<radio color="#8B8FF0" style="transform:scale(0.7)"
								:checked="openWay === item.id ? true : false" />
						</label>
					</radio-group>
				</view>
			</view>
			<view class="confirm-pay-btn" @tap="pay()">确认支付</view>
		</u-popup>
	</view>
	 </view>
</template>

<script>
	import empty from '@/components/empty.vue'
	export default {
		components: {
			empty
		},
		data() {
			return {
				orderList: [],
				status: 'loadmore',
				page: 1,
				limit: 5,
				thisOrderInfo: null,
				orderList2: [],
				// 0 待支付 1 进行中 2 任务已做完 3 确认完成 4 异常 100 已取消
				list: [{
					name: '待支付'
				}, {
					name: '进行中'
				}, {
					name: '待确认',
					count: 0
				}, {
					name: '已完成',
					count: 0
				}, {
					name: '已取消',
					count: 0
				}],
				current: 1,
				showPay: false,
				openWay: 0,
				openLists: [],
				orderInfo: null
			}
		},
		onLoad() {
			this.getorderList()
			this.initPayMethod()
		},
		onShow() {},

		methods: {
			// 保存
			messagebtn2(item) {
				if (item.questState != 2) {
					uni.showToast({
						title: "当前状态无法确认完成",
						icon: "none"
					})
					return
				}
				var that = this
				uni.showModal({
					title: '温馨提示',
					content: '确定完成当前订单信',
					confirmColor: '#8B8FF0',
					success: e => {
						if (e.confirm) {
							var data = {
								ordersId: item.ordersId
							}
							this.$u.post("/app/spreader/addConfirmation", data).then(res => {
								if (res.code === 0) {
									uni.showToast({
										title: '提交成功',
										icon: "none"
									})
									this.getorderList()
								} else {
									uni.showToast({
										title: res.msg,
										icon: "none"
									})
								}
							});
						}
					}
				});
			},
			// 初始化支付方式
			initPayMethod() {
				// #ifdef APP
				if (plus.os.name.toLowerCase() === 'android') {
					this.openLists = [{
						image: '/static/images/pay/zhifubao.png',
						text: '支付宝',
						id: 2
					}, {
						image: '/static/images/pay/lingqian.png',
						text: '金豆支付',
						id: 3
					}]
					this.openWay = 2
				} else {
					let checkIosPay = this.$queue.getData('checkIosPay')
					if (checkIosPay === '是') {
						this.openLists = [{
							image: '/static/images/pay/lingqian.png',
							text: '金豆支付',
							id: 3
						}]
						this.openWay = 3
					} else {
						this.openLists = [{
							image: '/static/images/pay/zhifubao.png',
							text: '支付宝',
							id: 2
						}, {
							image: '/static/images/pay/lingqian.png',
							text: '金豆支付',
							id: 3
						}]
						this.openWay = 2
					}
				}
				// #endif

				// #ifdef MP-WEIXIN
				this.openLists = [{
					image: '/static/images/pay/lingqian.png',
					text: '金豆支付',
					id: 3
				}]
				this.openWay = 3
				// #endif

				// #ifdef H5
				let ua = navigator.userAgent.toLowerCase()
				if (ua.indexOf('micromessenger') !== -1) {
					this.openLists = [{
						image: '/static/images/pay/weixin.png',
						text: '微信',
						id: 1
					}, {
						image: '/static/images/pay/lingqian.png',
						text: '金豆支付',
						id: 3
					}]
					this.openWay = 1
				} else {
					this.openLists = [{
						image: '/static/images/pay/zhifubao.png',
						text: '支付宝',
						id: 2
					}, {
						image: '/static/images/pay/lingqian.png',
						text: '金豆支付',
						id: 3
					}]
					this.openWay = 2
				}
				// #endif
			},

			// 选择支付方式
			selectWay(id) {
				this.openWay = id
			},

			// 去充值
			goMoney() {
				uni.navigateTo({
					url: '/me/wallet/wallet'
				})
			},
			handleOrder(item) {
				this.showPay = true
				this.orderInfo = item
			},
			pay(item) {
				console.log(this.openWay)
				let that = this
				if (that.openWay == 4) { //抖音支付
					that.toutiaoPay()
				} else if (that.openWay == 5) { //快手支付

				} else {
					let userId = uni.getStorageSync('userId')

					if (that.openWay == 1) {
						// #ifdef MP-WEIXIN
						that.$u.post('app/wxPay/wxPayJsApiOrder?orderId=' + this.orderInfo.ordersId).then(
							ret => {
								uni.requestPayment({
									provider: 'wxpay',
									timeStamp: ret.data.timestamp,
									nonceStr: ret.data.noncestr,
									package: ret.data.package,
									signType: ret.data.signType,
									paySign: ret.data.sign,
									success: function(suc) {
										console.log('success:' + JSON.stringify(suc));
										that.showPay = false
										uni.showToast({
											title: '支付成功',
											icon: 'success'
										})

										let data = {
											userId: uni.getStorageSync('userId')
										}
										that.$u.api.userVip(data).then(res => {
											if (res.code == 0 && res.data && res
												.data
												.isVip ==
												2) {
												uni.setStorageSync('isVIP', true)
											} else {
												uni.setStorageSync('isVIP', false)
											}
										})
										setTimeout(d => {
											let data = {
												flag: true
											}
											uni.$emit('back', data)
											uni.navigateBack(1)
										}, 1000);
									},
									fail: function(err) {
										console.log('fail:' + JSON.stringify(err));
										uni.showToast({
											title: '支付失败',
											icon: 'none'
										})
									}
								});
							});
						// #endif
						// #ifdef H5
						let ua = navigator.userAgent.toLowerCase();
						if (ua.indexOf('micromessenger') !== -1) {

							this.$u.post('/app/MiHuaPay/pay?orderId=' + res.data.ordersId +
								'&classify=1&payType=H5_WEIXIN').then(red => {
								if (red.code === 0) {
									/* this.callPay(red.data); */
									window.location.href = red.data
								} else {
									uni.showToast({
										icon: 'none',
										title: '支付失败!'
									});
								}

							});
						}
						// #endif
						// #ifdef APP
						this.$u.post("/app/wxPay/payAppOrder?orderId=" + res.data.ordersId).then(red => {
							if (red.code == 0) {
								that.setPayment('wxpay', JSON.stringify(red
									.data));
							} else {
								uni.showToast({
									title: red.msg,
									icon: 'none'
								})
							}
						});
						// #endif
					} else if (that.openWay == 2) {
						// #ifdef H5
						this.$u.post('/app/aliPay/payOrderSp?orderId=' + res.data.ordersId +
							'&classify=2&payType=ALIPAY_H5').then(
							red => {
								if (red.code === 0) {
									const div = document.createElement('div')
									div.innerHTML = red.data //此处form就是后台返回接收到的数据
									document.body.appendChild(div)
									document.forms[0].submit()
								} else {
									uni.showToast({
										icon: 'none',
										title: '支付失败!'
									});
								}
							});
						// #endif
						// #ifdef APP
						this.$u.post('/app/aliPay/payOrderSp?orderId=' + res.data.ordersId +
							'&classify=1&payType=ALIPAY_APP').then(
							red => {
								if (red.code === 0) {
									that.setPayment('alipay', red.data);
								} else {
									uni.showToast({
										icon: 'none',
										title: '支付失败!'
									});
								}
							});
						// #endif
					} else if (that.openWay == 3) {
						that.$queue.showLoading('支付中...')
						that.$Request.postT("/app/order/payOrders", {
							orderId: this.orderInfo.ordersId,
						}).then(red => {
							uni.hideLoading();
							if (red.code == 0) {
								that.showPay = false
								uni.showToast({
									title: '支付成功',
									icon: 'success'
								})

								let data = {
									userId: uni.getStorageSync('userId')
								}
								setTimeout(d => {
									let data = {
										flag: true
									}
									uni.$emit('back', data)
									uni.navigateBack(1)
								}, 1000);
							} else {
								that.$queue.showToast(red.msg)
							}
						});
					}

				}

			},
			isCheckPay(code, name, order) {
				if (code == 0) {
					console.log('999999999999')
					this.setPayment(name, order);
				} else {
					uni.hideLoading();
					uni.showToast({
						title: '支付信息有误'
					});
				}
			},
			setPayment(name, order) {
				let that = this
				uni.requestPayment({
					provider: name,
					orderInfo: order, //微信、支付宝订单数据
					success: function(res) {
						uni.hideLoading();
						that.showPay = false
						uni.showToast({
							title: '支付成功',
							icon: 'success'
						})

						let data = {
							userId: uni.getStorageSync('userId')
						}
						that.$u.api.userVip(data).then(res => {
							if (res.code == 0 && res.data && res.data
								.isVip ==
								2) {
								uni.setStorageSync('isVIP', true)
							} else {
								uni.setStorageSync('isVIP', false)
							}
						})
						setTimeout(d => {
							let data = {
								flag: true
							}
							uni.$emit('back', data)
							uni.navigateBack(1)
						}, 1000);
					},
					fail: function(err) {
						uni.hideLoading();
					},
					complete() {
						uni.hideLoading();
					}
				});
			},
			callPay: function(response) {
				if (typeof WeixinJSBridge === "undefined") {
					if (document.addEventListener) {
						document.addEventListener('WeixinJSBridgeReady', this.onBridgeReady(response), false);
					} else if (document.attachEvent) {
						document.attachEvent('WeixinJSBridgeReady', this.onBridgeReady(response));
						document.attachEvent('onWeixinJSBridgeReady', this.onBridgeReady(response));
					}
				} else {
					this.onBridgeReady(response);
				}
			},
			change(index) {
				this.current = index;
				this.getorderList();
			},
			getorderList() {
				let data = {
					limit: this.limit,
					page: this.page,
					status: this.current
				}
				if (this.current === 4) {
					data.status = 100
				}
				this.$u.get("/app/spreader/getUserSpreaderOrderPage", data).then(
					res => {
						if (res.code === 0) {
							this.pages = res.data.total
							if (this.page < this.pages) {
								this.status = 'loadmore'
							} else {
								this.status = 'nomore'
							}
							if (this.page == 1) {
								this.orderList = res.data.records
							} else {
								this.orderList = [...this.orderList, ...res.data.records]
							}
						} else {
							uni.stopPullDownRefresh();
						}
					});
			},
			cancelOrder(orderId) {
				var that = this
				uni.showModal({
					title: '提示',
					content: '是否确认取消此订单',
					success: function(res) {
						if (res.confirm) {
							that.$u.get("/app/spreader/cancelOrderByUser?orderId=" + orderId).then(
								res => {
									if (res.code === 0) {
										that.status = 'loading'
										that.getorderList()
									}
								});
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});

			},
			goNav(e) {
				uni.navigateTo({
					url: e
				})
			},
		},
		onReachBottom: function() {
			console.log('onReachBottom>>>>>>>')
			if (this.page < this.pages) {
				this.page += 1
				this.status = 'loading'
				this.getorderList()

			} else {
				this.status = 'nomore'
			}

		},
		onPullDownRefresh: function() {
			this.page = 1;
			this.getorderList()
		},

	}
</script>

<style lang="scss" scoped>
	
	page{
		background-color: #F7F8FF;
	}
	// 添加支付相关样式
	.confirm-pay-btn {
		width: 690rpx;
		height: 80rpx;
		background: #8B8FF0;
		color: #FFFFFF;
		text-align: center;
		line-height: 80rpx;
		border-radius: 50rpx;
		margin: 30rpx;
	}

	.course_list_container {
		
		padding-bottom: env(safe-area-inset-bottom);

		// tabs样式优化
		:deep(.u-tabs) {
			background: #fff;
			position: sticky;
			top: 0;
			z-index: 100;

			.u-tabs__wrapper__nav__item {
				padding: 0 30rpx;
				height: 84rpx;

				&.u-tabs__wrapper__nav__item--active {
					font-weight: bold;
					color: #ff2c3c;

					&::after {
						background: #ff2c3c;
					}
				}
			}
		}

		// 订单项样式
		.item {
			background: #fff;
			margin: 20rpx;
			border-radius: 12rpx;
			overflow: hidden;
			box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.04);

			.pic_title {
				.title_box {
					padding: 24rpx;
					display: flex;
					.title_pic{
						width: 160rpx;
						height: 160rpx;
						background: #F7F7F7;
						border-radius: 10rpx;
						margin-right: 16rpx;
						flex-shrink: 0;
						display: flex;
						align-items: center;
						justify-content: center;
						image{
							width: 130rpx;
							height: 126rpx;
						}
					}
					
					.title_info_box{
						flex: 1;
					}
					// 店铺信息
					.shop-info {
						display: flex;
						align-items: center;
						margin-bottom: 20rpx;
						padding-bottom: 20rpx;
						border-bottom: 1rpx solid #f5f5f5;

						.shop-logo {
							width: 40rpx;
							height: 40rpx;
							margin-right: 12rpx;
						}

						.shop-name {
							font-size: 28rpx;
							color: #333;
							flex: 1;
						}

						.order-status {
							font-size: 26rpx;
							color: #ff2c3c;
						}
					}

					// 订单内容
					.name {
						font-weight: bold;
						font-size: 28rpx;
						color: #1A1A1A;
					}

					.label {
						font-weight: 500;
						font-size: 24rpx;
						color: #333333;
						
						text{
							font-weight: 500;
							font-size: 24rpx;
							color: #999999;
						}
					}

					// 分割线
					.u-line {
						margin: 20rpx 0;
						opacity: 0.3;
					}

				}
			}
		}


	// 按钮区域
					.item-btom {
						display: flex;
						justify-content: flex-end;
						padding: 16rpx 20rpx 0 16rpx;
						gap: 20rpx;

						.item-btom-btn {
							width: 140rpx;
							height: 54rpx;
							border-radius: 27rpx;
							border: 1px solid #CCCCCC;
							font-weight: bold;
							font-size: 24rpx;
							color: #333333;
							display: flex;
							align-items: center;
							justify-content: center;
							&.pay {
								background: linear-gradient(90deg, #FD7885, #FAA7AF);
								color: #fff;
								border: none;
							}

							&:active {
								opacity: 0.8;
							}
						}
					}
				
				
		// 加载更多
		.u-loadmore {
			margin: 30rpx 0;

			:deep(.u-loadmore__content__text) {
				color: #999;
				font-size: 24rpx;
			}
		}

		// 空状态
		.empty {
			padding: 200rpx 0;
			text-align: center;
			color: #999;
			font-size: 28rpx;
		}
	}

	// 支付弹窗样式优化
	.u-popup {
		.pay-title {
			font-size: 32rpx;
			font-weight: bold;
			text-align: center;
			padding: 30rpx;
			border-bottom: 1rpx solid #f5f5f5;
		}

		.recharge-tip {
			display: flex;
			align-items: center;
			justify-content: flex-end;
			padding: 20rpx 30rpx;
			font-size: 26rpx;

			.go-recharge {
				color: #ff2c3c;
				margin-left: 10rpx;
			}
		}

		.pay-method {
			padding: 24rpx 30rpx;
			display: flex;
			align-items: center;
			border-bottom: 1rpx solid #f5f5f5;

			.method-icon {
				width: 48rpx;
				height: 48rpx;
				margin-right: 20rpx;
			}

			.method-name {
				flex: 1;
				font-size: 28rpx;
			}

			radio {
				transform: scale(0.8);
			}
		}

		.confirm-btn {
			margin: 40rpx 30rpx;
			height: 88rpx;
			line-height: 88rpx;
			text-align: center;
			background: #ff2c3c;
			color: #fff;
			border-radius: 44rpx;
			font-size: 32rpx;
			font-weight: 500;

			&:active {
				opacity: 0.8;
			}
		}
	}
</style>